<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
<script lang="ts" setup>
  import { useUserStore } from '/@/store/modules/user'
  import { ElScrollbar } from 'element-plus'
  import dayjs from 'dayjs'
  import TypeIt from 'typeit'
  import _ from 'lodash'

  const userStore = useUserStore()
  const { avatar, username } = storeToRefs(userStore)
  const value = ref('')
  const textareaRef = ref()
  const innerRef = ref<HTMLDivElement>()
  const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
  const finish = ref(true)

  const $baseMessage = inject<any>('$baseMessage')

  const radio = ref('小爱同学')
  const url = ref('https://api.oioweb.cn/api/ai/chat?text=')

  const changeGPT: any = (value: any) => {
    $baseMessage(`切换${value}成功！`, 'success', 'hey')
    if (value == '小爱同学')
      url.value = 'https://api.oioweb.cn/api/ai/chat?text='

    if (value == 'ChatGPT-V3.5')
      url.value = 'https://wmapi.wenbo.li/api/gpt/?message='

    if (value == 'ChatGPT-V4.0')
      url.value = 'https://wmapi.wenbo.li/api/gpt/four/?message='
  }

  const result =
    '\u0053\u0068\u006f\u0070\u0020\u0056\u0069\u0074\u0065\u0020\u6f14\u793a\u5730\u5740\u4ec5\u63d0\u4f9b\u0020\u0043\u0068\u0061\u0074\u0047\u0050\u0054\u0020\u57fa\u7840\u80fd\u529b\u5c55\u793a\uff0c\u5982\u9700\u83b7\u53d6\u0020\u0043\u0068\u0061\u0074\u0047\u0050\u0054\u0020\u5b8c\u6574\u529f\u80fd\u8bf7\u8bbf\u95ee\u0020\u004f\u0070\u0065\u006e\u0020\u0041\u0049\u0020\u5b98\u7f51\u81ea\u884c\u8d2d\u4e70\u5bf9\u63a5\uff0c\u60a8\u73b0\u5728\u53ef\u4ee5\u8ddf\u6211\u5bf9\u8bdd\u4e86'

  const list: any = ref([
    {
      id: 'uuid_9999',
      type: 'he',
      result,
      avatar: 'static/img/chatGPT.png',
      username: 'ChatGPT',
      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    },
  ])

  onMounted(() => {
    textareaRef.value.focus()
    typeWriting('uuid_9999', result)
  })
  const send = () => {
    if (!value.value) {
      $baseMessage('提交内容不能为空', 'error', 'hey')
      return
    }
    if (!finish.value) {
      $baseMessage(
        'ChatGPT还未回答' + '完您的上个问题，请稍' + '后再进行提问',
        'error',
        'hey'
      )
      return
    }
    if (finish.value) {
      finish.value = false
      const newList = list.value

      newList.push(
        {
          type: 'mine',
          result: value.value,
          avatar: avatar,
          username: username,
          time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        },
        {
          type: 'tips',
          result: 'ChatGPT AI 内' + '容生成中，请稍后。。。',
          avatar: 'static/img/chatGPT.png',
          username: 'ChatGPT',
          time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        }
      )

      setTimeout(() => {
        value.value = ''
        scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - 380)
      }, 0)

      const id = _.uniqueId('uuid_')

      axios
        .get(`${url.value}${value.value}`)
        .then(({ data: { answer, result } }) => {
          newList.pop()

          newList.push({
            id,
            type: 'he',
            result: answer || result.displayText,
            avatar: 'static/img/chatGPT.png',
            username: 'ChatGPT',
            time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          })

          typeWriting(id, answer || result.displayText)

          finish.value = true
          scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - 380)
        })
        .catch(() => {
          $baseMessage('ChatGPT 余额不足！', 'error', 'hey')
          finish.value = true
        })
    }
  }

  const typeWriting = (id: string, answer: string) => {
    setTimeout(() => {
      new (TypeIt as any)(`#${id}`, {
        strings: [answer],
        cursorChar: "<span class='cursorChar'>|<span>", //用于光标的字符。HTML也可以
        speed: 50,
        lifeLike: true, // 使打字速度不规则
        cursor: false, //在字符串末尾显示闪烁的光标
        breakLines: false, // 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换
        loop: false, //是否循环
      }).go()
    }, 0)
  }
</script>

<template>
  <div class="chat-GPT-container no-background-container">
    <el-row :gutter="20">
      <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
        <vab-card shadow="never">
          <div class="vab-chat-main">
            <el-radio-group v-model="radio" @change="changeGPT">
              <el-radio-button label="小爱同学" />
              <el-radio-button label="ChatGPT-V3.5" />
              <el-radio-button label="ChatGPT-V4.0" />
            </el-radio-group>
            <el-scrollbar ref="scrollbarRef">
              <ul ref="innerRef">
                <template v-for="(item, index) in list" :key="index">
                  <li :class="item.type == 'mine' ? 'vab-chat-mine' : ''">
                    <div class="vab-chat-user">
                      <img alt="头像" :src="item.avatar" />
                      <cite>
                        {{ item.username }}
                        <i>{{ item.time }}</i>
                      </cite>
                    </div>
                    <div class="vab-chat-text">
                      <span v-if="item.type == 'mine' || item.type == 'tips'">
                        {{ item.result }}
                      </span>
                      <span v-if="item.type == 'he'" :id="item.id"></span>
                    </div>
                  </li>
                </template>
              </ul>
            </el-scrollbar>
          </div>
          <div class="vab-chat-footer">
            <div class="vab-chat-textarea">
              <el-input
                ref="textareaRef"
                v-model="value"
                resize="none"
                show-word-limit
                type="textarea"
                @keyup.enter="send"
              />
            </div>
            <div class="vab-chat-send">
              <el-button type="primary" @click="send">发送</el-button>
            </div>
          </div>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
  $color_1: var(--el-color-grey);
  $color_2: #333;
  $color_3: var(--el-color-primary);
  $color_4: #fff;
  $background-color_1: #e2e2e2;
  $background-color_2: #333;
  $background-color_3: var(--el-color-primary);
  $border-color_1: #e2e2e2 transparent transparent;
  $border-top-color_1: var(--el-color-primary);

  .chat-GPT-container {
    :deep(.el-card__body) {
      position: relative;
      min-height: calc($base-keep-alive-height - 20px);
    }

    .vab-chat-main {
      height: calc($base-keep-alive-height - 230px);

      ul {
        padding: 5px 25px 15px 5px;

        li {
          position: relative;
          min-height: 68px;
          padding-left: 60px;
          margin-bottom: 10px;
          font-size: 0;
        }

        .vab-chat-text {
          position: relative;
          display: inline-block;
          max-width: 462px;
          min-height: 38px;
          padding: 8px 15px;
          margin-top: 20px;
          font-size: 14px;
          line-height: 22px;
          color: $color_2;
          word-break: break-all;
          vertical-align: top;
          background-color: $background-color_1;
          border-radius: 5px;

          &:after {
            position: absolute;
            top: 13px;
            left: -10px;
            width: 0;
            height: 0;
            overflow: hidden;
            content: '';
            border-color: $border-color_1;
            border-style: solid dashed dashed;
            border-width: 10px;
          }

          a {
            color: $color_3;
          }

          img {
            max-width: 100%;
            vertical-align: middle;
          }
        }

        .vab-chat-user {
          position: absolute;
          left: 3px;
          display: inline-block;
          font-size: 14px;
          vertical-align: top;

          img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
          }

          cite {
            position: absolute;
            top: -5px;
            left: 60px;
            width: 500px;
            font-size: 12px;
            font-style: normal;
            line-height: 24px;
            color: $color_1;
            text-align: left;
            white-space: nowrap;

            i {
              padding-left: 5px;
              font-style: normal;
            }
          }
        }

        .vab-chat-mine {
          padding-right: 60px;
          padding-left: 0;
          text-align: right;

          .vab-chat-user {
            right: 3px;
            left: auto;

            cite {
              right: 60px;
              left: auto;
              text-align: right;

              i {
                padding-right: 5px;
                padding-left: 0;
              }
            }
          }

          .vab-chat-text {
            margin-left: 0;
            color: $color_4;
            text-align: left;
            background-color: $background-color_3;

            &:after {
              right: -10px;
              left: auto;
              border-top-color: $border-top-color_1;
            }

            a {
              color: $color_4;
            }
          }
        }
      }
    }

    .vab-chat-footer {
      position: absolute;
      bottom: 20px;
      width: 100%;
      height: 150px;
      padding-right: 40px;

      :deep(textarea) {
        height: 110px;
      }

      .vab-chat-send {
        position: absolute;
        right: 40px;
        margin-top: 15px;
      }
    }
  }
</style>
